<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>폼요소</title>
	</head>

	<body>
		<h1>폼 요소</h1>
		<form action="login.jsp" method="get" name="frm01">
			<p>
				 <label for="usrid">아이디</label>
				 <input type="text" name="usrid" id="usrid" />
			</p>
			<p>
				<label for="passwd">비밀번호</label>
				<input type="password" name="passwd" id="passwd" />
			</p>
			<p>
				<input type="button" value="로그인" />
				<input type="submit" value="로그인" />
				<input type="reset" value="다시 입력" />
			</p>
			
		</form>
		
		<hr />
		
		<hr />
		
		<form name="frm03">
			<p>
				<label for="content">본문내용</label>
				<textarea rows="7" cols="35"
					name="content" id="content"> </textarea>
			</p>
		</form>
		<hr />
		
		<form name="frm04">
			<p>
				<label for="grade">학년(콤보박스)</label>
				<select name="grade" id="grade" 
					size="6" multiple="multiple">
					<option>학년을 선택하세요</option>
					<option value="1">1학년</option>
					<option value="2">2학년</option>
					<option value="3" selected="selected">3학년</option>
				</select>
			</p>
			<p>
				<label for="gender">성별(라디오버튼)</label>
				<input type="radio" name="gender" value="m" checked="checked" /> 남자				
				<input type="radio" name="gender" value="f" /> 여자				
			</p>
			<p>
				<label for="hobby">취미(체크박스버튼)</label>
				<input type="checkbox" name="hobby" id="sports" value="sports" checked="checked" /> 스포츠
				<input type="checkbox" name="hobby" id="game" value="game" /> 게임
				<input type="checkbox" name="hobby" id="fishing" value="fishing" /> 낚시
				<input type="checkbox" name="hobby" id="drive" value="drive" /> 드라이브
			</p>
			<p>
				<label for="photo">사진등록</label>
				<input type="file" name="photo" id="photo" />
			</p>
			<p>
				<label>이미지버튼</label>
				<input type="image" 
					src="images/icons/imgbtn.png" />
			</p>
			<p>
				<input type="hidden" 
					name="userno" value="12-456" />
			</p>
			<p>
				<button type="submit">입력완료</button>
				<button>입력완료</button>
				<button type="reset">다시입력</button>
			</p>
			</form>
			<hr />
			<form action="" method="post" name="frm05">
			<fieldset>
				<legend>세부 연락정보</legend>
				<label>이메일</label>
					<input type="email" required="required" /><br />
				<label>핸드폰</label>
					<input type="text" required="required" /><br />
				<label>집전화</label>
					<input type="text" required="required" /><br />
				<input type="submit" value="입력완료" />		
			</fieldset>
			</form>
			<hr />
			<input type="text" name="uid" 
				placeholder="아이디" /> <br />
			<input type="password" name="pwd" 
				placeholder="비밀번호" />
			<input type="date" name="birth" 
				placeholder="생년월일" />
			
			<!--
				form : 폼
				사용자 데이터 입력을 위한 html 양식을 의미
				사용자(클라이언트)와 서버가 대화할 수 있게
				도와주는 도구
				
				form
				사용자가 입력해야 할 항목의 범위를 지정
			 입력한 데이터를 서버로 전송하는 역할 담당
				action	: 전송한 데이터를 수신할 서버 페이지
				method : 데이터 전송방식 지정 (post/get)
				name    : 여러 폼을 식별하기 위한 이름
				enctype : 전송할 데이터 인코딩 방식 지정
						첨부기능을 구현하려면
						"multipart/form-data" 로 설정
						
				get 전송방식 (기본값)
				입력 데이터를 action 속성의 url 끝에 추가
				단순히 서버상의 데이터를 조회할때 사용
				입력데이터 크기가 소량일 때
				
				post 전송방식
				입력 데이터를 HTTP 헤더에 추가
			 전송해야 하는 데이터가 매우 크거나
				민감한 데이터가 포함되어 외부에 보이면
				안되는 경우, 파일 첨부시 사용
				자료 추가, 삭제, 수정할 때 사용
				
				텍스트 입력
				 input 태그를 이용해서 텍스트 정보 입력
			  type 속성이 text면 한 줄의 문자열을 입력
				 name 속성은 반드시 작성
				 maxlength 속성은 입력가능 문자 수 제한
				 size 속성은 입력 창의 크기 지정 (사용X)
				
				 type 속성이 password면 
				 입력 문자는 *로 마스크 처리됨
				 입력 문자가 화면에서 가려지지만
			 데이터가 안전하게 서버로 전송되는 것은 아님
			 SSL를 사용해서 통신하는 것을 추천 
			
				type속성이 radio면 선택항목에서 하나만 선택
			 value 속성으로 항목을 선택하는 경우
			 서버로 전송할 값을 정의
			 checked 속성을 이용해서 기본 선택항목을 정의
			
				type 속성이 checkbox 면 선택항목에서 
				하나이상 선택
				그외 나머지는 radio 와 동일함
				
				 type 속성이 file 이면 사용자가 파일을 업로드 가능
			  파일 업로드시 method 속성에는 반드시 post 지정
				 form 의 enctype 속성값에 multipart/form-data 를
				 지정해야 함
				 
				type 속성이 submit 이면 폼을 서버로 보내는데 사용
				type 속성이 reset 이면 폼에 입력된 정보를 초기화
				type 속성이 button이면 단순한 버튼이 생성
				자바스크립트를 이용해서 다양한 이벤트를 
				처리하는데 사용할 수 있음
				
				type 속성이 image 이면 전송버튼에 이미지 사용
			 src 속성으로 버튼에 사용할 이미지 지정
				
				type 속성이 hidden 이면 사용자가 볼 수 없는
			 폼에 값을 추가하여 서버로 전송 가능
			 브라우저에는 아무것도 표시 되지 않음
				
				select 태그는 목록에서 하나를 선택하게 함
			 선택 가능한 목록은 option 태그로 작성
			 	selected 속성을 이용해서 기본 선택항목을 정의
			 size / multiple 속성을 추가하여
			 다중 선택이 가능한 드롭다운 버튼 작성할 수 있음
			
				폼 컨트롤에 레이블 붙이기
			 폼 컨트롤에 제목을 나타내기 위해
			 각 컨트롤 앞에 단순 텍스트를 추가할 수도 있지만
			 시각장애인들을 위해 label 태그 사용
			 label 태그에 설명과 폼 요소를 함께 포함하거나
			 label 태그에 for 속성을 이용해서 폼 요소를 지정
			 for 속성값은 폼의 id 속성값과 일치해야 함
				
				폼 요소 그룹으로 묶기
			 fieldset 태그로 특정 주제와 관련된 폼 컨트롤들을
			 그룹화할 수 있음 - 주위에 선이 생김
			 legend 요소는 fieldset 태그의 목적을 나타내는
			 제목을 표시해 줌
			
				폼 유효성 검증 : HTML5
			 폼 컨트롤에 올바른 내용이 입력되지 않으면
			 사용자에게 메시지를 띄우게 됨
			 required 속성에 required 값을 지정
			 유효성 검증은 클라이언트에서 먼저 수행하고
			 서버에서 나중에 수행하는 것이 좋음
			
				
			-->
			
	</body>
	
	
	
	
</html>
